<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas example</title>
<script>
   /* var a=10;
   for(i=1; i<=10; i++){
      document.write(i);*/
      window.onload = function(){
  		var canvas = document.getElementById("mycanvas");
  		var ctx = canvas.getContext("2d");
  		ctx.strokeStyle = "#ff0000";
  		ctx.fillStyle="#0000ff";
  		/* ctx.strokeRect(x, y, w, h); */
  		ctx.strokeRect(100, 100, 300, 300);
  		ctx.fillRect(200, 200, 100, 100);
  		
  		var color = new Array("#ff0000", "#00ff00", "#0000ff", 
  				                "#ffff00", "#00ffff", "#ff00ff", 
  				                "#000000", "#212121", "#cccccc");
  		var j = 0;
  		for(i=10; i<500; i=i+60){
  			ctx.fillStyle = color[j];
  			ctx.fillRect(i, 450, 55, 55);
  			j++;
  		}
  	}
</script>
</head>
<body>
   <Canvas id = 'mycanvas' width = '600px', height='500px'> </Canvas>
</body>
</html>